import React, { useEffect, useState, useCallback } from 'react';
import { getTemOne } from '../../request'; // 假设这个函数支持分页
import Masonry from 'react-masonry-css';
import './tems.css';
import gbiao from '../../assets/images/gbiao1.png'
import { Button } from 'antd';

const TemplateOne: React.FC = () => {
  // 存储图片数据
  const [imageData, setImageData] = useState<Array<{ id: string; image: string }>>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const itemsPerPage = 20; // 每页显示15条数据
  useEffect(() => {
    getTemOne().then(res => {
      setImageData(res.data.list)
    })
  }, [])

  // key唯一
  const uniqueKeys = new Set();

  function generateUniqueKey(id) {
    let key = id;
    let count = 1;

    while (uniqueKeys.has(key)) {
      key = `${id}_${count}`;
      count += 1;
    }

    uniqueKeys.add(key);
    return key;
  }
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = imageData.slice(indexOfFirstItem, indexOfLastItem);

  const totalPages = Math.ceil(imageData.length / itemsPerPage);

  const handlePageChange = (page: number) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };
  return (

    <div style={{ width: '100%', height: '100%' }}>
      <Masonry
        breakpointCols={{ default: 5, 1100: 3, 700: 2, 500: 1 }}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {currentItems.map(item => (
          <div key={generateUniqueKey(item.id)} style={{ marginBottom: '10px' }}>
            <img
              src={item.image}
              alt="Image"
              style={{ width: '100%', borderRadius: '10px', display: 'block' }}
            />
          </div>
        ))}
      </Masonry>
      <div id="bottom">
        <div style={{ height: '80px', lineHeight: '80px', textAlign: 'center' }}>
          <Button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>上一页</Button>&nbsp;
          {[...Array(totalPages).keys()].map(page => (
            <Button
              key={page + 1}
              onClick={() => handlePageChange(page + 1)}
              style={{ fontWeight: currentPage === page + 1 ? '900' : 'normal' }}
            >
              {page + 1}
            </Button>
          ))}
          <Button>下一页</Button>&nbsp;
          到第&nbsp;
          <Button>1</Button>&nbsp;
          页&nbsp;
          <Button>确定</Button>&nbsp;
        </div>
        <hr />
        <div className='sps'>
          <span>创客贴首页</span>
          <span><b>|</b></span>
          <span>帮助与支持</span>
          <span><b>|</b></span>
          <span>服务文档</span>
          <span><b>|</b></span>
          <span>关于我们</span>
          <span><b>|</b></span>
          <span>设计学院</span>
          <span><b>|</b></span>
          <span>教程</span>
          <span><b>|</b></span>
          <span>设计模板</span>
        </div>
        <div className='sps'>
          <span>用户协议</span>
          <span><b>|</b></span>
          <span>隐私协议</span>
        </div>
        <div className='sps2'>
          <span>Copyright©北京艺源酷科技有限公司</span>
          <img src={gbiao} alt="" />
          <span>京公网安备11010502049358号京1CP备14056892号-1网信算备110108349315101240027号网信算备110108349315101240019号</span>
          <button style={{ border: 'none', background: 'none', cursor: 'pointer' }}>更多^</button>
        </div>
      </div>
    </div>
  );
};

export default TemplateOne;

